import {
  Component, DestroyRef, inject,
  OnInit,
  signal
} from '@angular/core';
import {
  PlacesContainer
} from '../places-container/places-container';
import {Place} from '../place.model';
import {Places} from '../places';
import {PlacesService} from '../places.service';

@Component({
  selector: 'app-user-places',
  imports: [
    PlacesContainer,
    Places
  ],
  templateUrl: './user-places.html',
  styleUrl: './user-places.css'
})
export class UserPlaces implements  OnInit{
  //places = signal<Place[] | undefined>(undefined);
  isFetching = signal(false);
  error = signal('');
  private placesService = inject(PlacesService);

  private destroyRef = inject(DestroyRef);
  places = this.placesService.loadedUserPlaces;

  ngOnInit(){
    this.isFetching .set(true);


    const subscription =this.placesService.loadUserPlaces()
      .subscribe({
        error: (error) => {
          console.log(error);
          this.error.set(error.message);
        },
        complete:()=>{
          this.isFetching.set(false);
        }
      });

    this.destroyRef.onDestroy(()=>{
      subscription.unsubscribe();
    });
  }

  onRemovePlace(place:Place){
    const subscription = this.placesService.removeUserPlace(place)
      .subscribe();

    this.destroyRef.onDestroy(()=>{
      subscription.unsubscribe();
    });
  }
}
